<template>
	<view class="content">
		
		<uni-list-item class="bg-white margin-tb-sm padding-xs">
				<template v-slot:body>
					<view class="flexrowcenter flex1">
						<view class="flexrowcenter ">
							<image class="red-marker" src="@/static/images/common/red-mark.png" />
							<text class="text-df  font-bold " style="width:80px;margin-left: 10px;">组织单位</text>
						</view>
						<view class="flex1" />
						<select-dept v-model="dept" />
					</view>
				</template>
		</uni-list-item>
		<uni-section title="人员信息" type="line">

			<uni-list-item>
				<template v-slot:body>
					<view class="flexrowcenter">
						<view class="flexrowcenter">
							<image class="red-marker" src="@/static/images/common/red-mark.png" />
							<text class="text-df  font-bold " style="width:80px;margin-left: 10px;">姓名</text>
						</view>
						<view class="uni-input-wrapper">
							<!--							<input style="margin-left: 10px;" class="uni-input uni-input-maxlength" :maxlength="20"-->
							<!--								placeholder="请输入姓名" placeholder-class="placeholder-form-class"-->
							<!--								:value="name"  />-->

							<uni-easyinput v-model="name" placeholder="请输入姓名" :inputBorder="false" />

						</view>
					</view>
				</template>
			</uni-list-item>


			<uni-list-item>
				<template v-slot:body>
					<view class="flexrowcenter">
						<view class="flexrowcenter">
							<image class="red-marker" src="@/static/images/common/red-mark.png" />
							<text class="text-df  font-bold " style="width:80px;margin-left: 10px;">接警号码</text>
						</view>
						<view class="uni-input-wrapper">
							<uni-easyinput :inputBorder="false" type="mobile" v-model="phone" placeholder="请输入接警号码" />
						</view>
					</view>
				</template>
			</uni-list-item>

			<uni-list-item>
				<template v-slot:body>
					<view class="flexrowcenter">
						<text class="text-sm text-red ">请你确保填写的接警号码真实有效,填入未经授权使用的号码带来的后果需自行承担</text>
					</view>
				</template>
			</uni-list-item>

			<uni-list-item v-if="isAdd || phone !== originPhone">
				<template v-slot:header>
					<view class="flexrowcenter" style="width: 100px;">
						<image class="red-marker" src="@/static/images/common/red-mark.png" />
						<text class="text-df  font-bold " style="width:80px;margin-left: 10px;">验证码</text>
					</view>
				</template>
				<template v-slot:body>
					<view class="uni-input-wrapper">
						<uni-easyinput type="number" style="width:240rpx;" v-model="code" placeholder="请输入验证码" />
					</view>
				</template>
				<template v-slot:footer>
					<view class="flexrowcenter margin-left-sm">
						<u-code :seconds="seconds" ref="uCode" 
						@change="codeChange"></u-code>
						<u-button @tap="getCode" style="width: 230rpx;font-size: 22rpx;">{{tips}}</u-button>
					</view>
				</template>
			</uni-list-item>
		</uni-section>

		<uni-section title="通知方式" type="line" class="margin-top">
			<uni-list-item title="电话通知"
                     show-switch
                     @switchChange="switchChange('voice')"
                     :switch-checked="inform.includes('voice')"
      >
			</uni-list-item>
			<uni-list-item title="短信通知"
                     show-switch
                     :switch-checked="inform.includes('sms')"
                     @switchChange="switchChange('sms')">
			</uni-list-item>
		</uni-section>

		<view class="button-container">
			<button type="primary" v-if="isAdd" class="button" @click="add">{{'新增'}}</button>
      <button type="primary" v-else class="button" @click="save">{{'保存'}}</button>
		</view>
	</view>

</template>

<script>
import { thingResponderUpdate,thingResponderCreate } from "@/api/police/index"
import { sendSmsCode } from "@/api/system/user"
	export default {
    data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 60,
        		sms:true,
				name: '',
				phone: '',
				inform:'voice,sms',
				deptId:'',
				id:'',
				code:null,
				paramsdetail:{},
				isAdd:true,

				dept:{},
				originPhone: '',
			}
		},
		onLoad(query) {
			const {
				data,
				isAdd
			} = query || {}
			this.isAdd =!!isAdd

			if(!isAdd){
				const paramsdetail =  JSON.parse(data);
				this.paramsdetail = paramsdetail;
				const {
					inform,
					name,
					phone,
					deptId,
					deptName,
					id
				} = paramsdetail
				this.name = name
				this.phone = phone
				this.originPhone = phone
				this.deptId = deptId
				this.id = id
				this.inform = inform
				this.dept = {
					id: deptId,
					name: deptName
				}
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					sendSmsCode({
						mobile:  this.phone,
						scene: 23  //    RESPONDER_PHONE(23, "responder_phone", "接警人 - 发送验证码"),
						}).then(res=>{
							uni.hideLoading();
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
							uni.showToast({
								title:'发送成功'
							})
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},

    //   sendMsg(){
	// 	this.$refs.uCode.start();
    //     sendSmsCode({
    //       mobile:  this.phone,
    //       scene: 23  //    RESPONDER_PHONE(23, "responder_phone", "接警人 - 发送验证码"),
    //     }).then(res=>{
    //       uni.showToast({
    //         title:'发送成功'
    //       })
    //     })
    //   },
			onMaxLengthInput(event) {
				this.onMaxLengthInputValue = event.detail.value
			},
      add() {
        console.log('add>>>')
		if (!this.code && (this.isAdd || this.phone !== this.originPhone)) {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			})
			return
		}
        //保存接口
        const param = {
          name : this.name,
          phone : this.phone,
          inform :this.inform,
          // deptId : this.deptId,
        //   id :this.id,
          code:this.code,
		  deptId: this.dept.id
        }
        console.log('param>>>',param)
		uni.showLoading({
			title: "创建中...",
		})
        thingResponderCreate(param).then(res=>{
          uni.showToast({
            title: '保存成功，1秒钟回到上个页面'
          })
          uni.$emit('refresh-police-list',true)
          setTimeout(()=>{
            uni.navigateBack({
              delta: 1
            })
          },1000)
        })
      },
			save() {
				//保存接口
				    if (!this.code && (this.isAdd || this.phone !== this.originPhone)) {
						uni.showToast({
							title: '请输入验证码'
						})
						return
					}
					console.log('save>>>')
					const param = {
					name : this.name,
					phone : this.phone,
					inform :this. inform,
					id :this.id,
					code:this.code,
					deptId: this.dept.id
					}
					console.log('param>>>',param)
					uni.showLoading({
						title: "更新中...",
					})
					thingResponderUpdate(param).then(res=>{
						uni.$emit('refresh-police-list',true)
						uni.navigateBack()
					})
			},
			changeMobileInput(event) {
				//changeNameInput(){
				console.log('changeMobileInput>>>', event.target.value)
			},
			switchChange(des) {
        //if(checkDataListset.has(id)){
        // checkDataListset.delete(id)
       const inform = this.inform
        console.log('inform>>>',inform)
        let informSet
        if(inform.trim()){
           informSet = new Set(inform.split(','))
        }else{
          informSet =  new Set()
        }

        if(informSet.has(des)){
          informSet.delete(des)
        }else{
          informSet.add(des)
        }
        const informArray = Array.from(informSet)
        const newinformArray =   informArray.join(',')
        console.log('newinformArray>>>',newinformArray)
         this.inform =   newinformArray
			},
		}
	}
</script>

<style scoped>
	.content {
		height: 100%;
		padding-bottom: calc(var(--window-bottom) + 20px);

	}


	.button-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 40rpx;
		height: 50px;
		background-color: #f5f5f5;
	}

	.button {
		flex: 1;
		margin-right: 10px;
		margin-left: 10px;

		height: 100%;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		border-radius: 5px;

		color: #fff;


	}

	uni-input {
		height: 2.4em !important;
	}
</style>